iT邦幫忙

2021 iThome 鐵人賽

DAY 5
0
Modern Web

前端幼鳥三十天養成記系列 第 5

DAY5 速談flex gride布局、定位、響應式

  • 分享至 

  • xImage
  •  

為了加快進度,我要快速帶過flex、gride布局、定位和響應式,幫你繫個安全戴,要飆車囉~~


flex : 學習方法→邊玩蛙蛙回家,邊看連結2的說明


grid :切成網格 學習方法:純玩遊戲


定位

布局 VS 定位

  • 布局:大的區塊與區塊之間的關係。
  • 定位:設定單一元素的位置。可以想像成拿個釘子,在畫布上愛釘哪釘哪。

position: relative VS position: absolute :

  • relative 根據自身定位
  • absolute 根據最近一層的定位元素定位

定位元素:

  • position: absolute, relative, fixed
  • <body>

實現水平對齊、垂直對齊的三種方法:

  • inline element:對父元素設 text-align
  • block element:
    • margin自動分配 margin:auto
    • top:50% ; margin-top: ;
      left:50% ; margin-left: ; 幼鳥們,覺得要填多少呢? 試試看
    • transform:translate(-50%,-50%);

小筆記:子元素position:absolute後 父元素可能塌陷

條件:當

  1. 父元素沒設高度
  2. 子元素設定position:absolute
  3. 父元素不是子元素的定位元素

則,子元素脫離父元素的控制 →父元素塌陷。


響應式

rem 相對長度單位,相對於根元素<html>

@media only screen and (min-width:360px)  and (max-width:412px){
	html{/*Glaxy S7*/
		font-size:100px;
	}
}@media only screen and (min-width:413px){
	html{/*Galaxy Note 10*/
		font-size:115px;
	}
}
p{
 font-size: 0.15rem;   
}

vw=1/100width;vh:1/100height

vw,vh 和 rem的差別

  • vw vh會精準依照寬高尺寸,縮放元素。
  • rem的方法是一個一個級距,當到下一個級距,元素才會有尺寸調整。
p{
	/* width:x px */ 
	font-size: 15vw; 
	/* font-size= (x*15/100)px */  
}

  • 小備註:font-size 設定12px以下,會顯示12px

時間:9/10 04:53PM
音樂:紅玫瑰 張碧晨
飲料:冰咖啡
地點:圓桌窗戶旁
狀態:這是從Notion貼到IT邦幫忙的時間,不是寫文章的
參考的影片在YOUTUBE被下架,覺得慌...


上一篇
DAY4 雙飛翼布局 - 三個欄的C位爭奪戰(下)
下一篇
DAY6 JS跑在瀏覽器上的怪問題們
系列文
前端幼鳥三十天養成記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言